30 สิงหาคม 2568ไทย

ปลดล็อกการจัดการ Event ที่แข็งแกร่งสำหรับ React Portals คู่มือฉบับสมบูรณ์นี้จะอธิบายรายละเอียดว่า Event Delegation ช่วยเชื่อมความแตกต่างของ DOM tree ได้อย่างมีประสิทธิภาพอย่างไร เพื่อให้ผู้ใช้โต้ตอบได้อย่างราบรื่นในเว็บแอปพลิเคชันระดับโลกของคุณ

เชี่ยวชาญการจัดการ Event ใน React Portal: การใช้ Event Delegation ข้าม DOM Trees สำหรับแอปพลิเคชันระดับโลก

ในโลกของการพัฒนาเว็บที่กว้างใหญ่และเชื่อมต่อถึงกัน การสร้างส่วนติดต่อผู้ใช้ (UI) ที่ใช้งานง่ายและตอบสนองได้ดีเพื่อรองรับผู้ใช้ทั่วโลกเป็นสิ่งสำคัญยิ่ง React ซึ่งมีสถาปัตยกรรมแบบคอมโพเนนต์ ได้มอบเครื่องมืออันทรงพลังเพื่อให้บรรลุเป้าหมายนี้ ในบรรดาเครื่องมือเหล่านั้น React Portals โดดเด่นในฐานะกลไกที่มีประสิทธิภาพสูงสำหรับการเรนเดอร์ children ไปยัง DOM node ที่อยู่นอกลำดับชั้นของคอมโพเนนต์แม่ ความสามารถนี้มีค่าอย่างยิ่งสำหรับการสร้างองค์ประกอบ UI เช่น โมดอล (modals), ทูลทิป (tooltips), ดรอปดาวน์ (dropdowns) และการแจ้งเตือน (notifications) ที่ต้องการหลุดพ้นจากข้อจำกัดของสไตล์หรือบริบทการซ้อนทับ `z-index` ของคอมโพเนนต์แม่

แม้ว่า Portals จะมีความยืดหยุ่นสูง แต่ก็นำมาซึ่งความท้าทายที่ไม่เหมือนใคร นั่นคือการจัดการ Event โดยเฉพาะอย่างยิ่งเมื่อต้องรับมือกับการโต้ตอบที่ครอบคลุมส่วนต่างๆ ของ Document Object Model (DOM) tree เมื่อผู้ใช้โต้ตอบกับองค์ประกอบที่เรนเดอร์ผ่าน Portal การเดินทางของ Event ผ่าน DOM อาจไม่สอดคล้องกับโครงสร้างเชิงตรรกะของ React component tree ซึ่งอาจนำไปสู่พฤติกรรมที่ไม่คาดคิดหากจัดการไม่ถูกต้อง แนวทางแก้ไข ซึ่งเราจะสำรวจในเชิงลึก อยู่ในแนวคิดพื้นฐานของการพัฒนาเว็บ นั่นคือ Event Delegation

คู่มือฉบับสมบูรณ์นี้จะไขข้อข้องใจเกี่ยวกับการจัดการ Event ด้วย React Portals เราจะเจาะลึกความซับซ้อนของระบบ Synthetic Event ของ React ทำความเข้าใจกลไกของ event bubbling และ capture และที่สำคัญที่สุดคือสาธิตวิธีการนำ Event Delegation ที่แข็งแกร่งมาใช้ เพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่ราบรื่นและคาดเดาได้สำหรับแอปพลิเคชันของคุณ ไม่ว่าแอปพลิเคชันนั้นจะเข้าถึงผู้ใช้ทั่วโลกหรือมีความซับซ้อนของ UI มากเพียงใดก็ตาม

ทำความเข้าใจ React Portals: สะพานเชื่อมข้ามลำดับชั้นของ DOM

ก่อนที่จะเจาะลึกเรื่องการจัดการ Event เรามาทำความเข้าใจให้ชัดเจนก่อนว่า React Portals คืออะไร และทำไมจึงมีความสำคัญอย่างยิ่งในการพัฒนาเว็บสมัยใหม่ React Portal ถูกสร้างขึ้นโดยใช้ `ReactDOM.createPortal(child, container)` โดยที่ `child` คือ React child ใดๆ ที่สามารถเรนเดอร์ได้ (เช่น element, string หรือ fragment) และ `container` คือ DOM element

ทำไม React Portals จึงจำเป็นสำหรับ UI/UX ระดับโลก

ลองนึกถึงกล่องโต้ตอบแบบโมดอล (modal dialog) ที่ต้องปรากฏอยู่เหนือเนื้อหาอื่นๆ ทั้งหมด โดยไม่คำนึงถึงคุณสมบัติ `z-index` หรือ `overflow` ของคอมโพเนนต์แม่ หากโมดอลนี้ถูกเรนเดอร์เป็น child ปกติ มันอาจถูกตัดโดย `overflow: hidden` ของแม่ หรืออาจมีปัญหาในการแสดงผลให้อยู่เหนือองค์ประกอบพี่น้องเนื่องจากความขัดแย้งของ `z-index` Portals แก้ปัญหานี้โดยอนุญาตให้โมดอลถูกจัดการตามตรรกะโดยคอมโพเนนต์แม่ของ React แต่ถูกเรนเดอร์ทางกายภาพโดยตรงไปยัง DOM node ที่กำหนดไว้ ซึ่งมักจะเป็น child ของ document.body

การหลุดพ้นจากข้อจำกัดของ Container: Portals ช่วยให้คอมโพเนนต์ "หลุดพ้น" จากข้อจำกัดด้านภาพและสไตล์ของ container แม่ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับ overlays, dropdowns, tooltips และ dialogs ที่ต้องจัดตำแหน่งตัวเองเทียบกับ viewport หรือที่ด้านบนสุดของ stacking context
การคงไว้ซึ่ง React Context และ State: แม้จะถูกเรนเดอร์ในตำแหน่ง DOM ที่แตกต่างกัน คอมโพเนนต์ที่เรนเดอร์ผ่าน Portal ยังคงรักษาตำแหน่งของมันไว้ใน React tree ซึ่งหมายความว่ามันยังสามารถเข้าถึง context, รับ props และมีส่วนร่วมในการจัดการ state เดียวกันได้ ราวกับว่าเป็น child ปกติ ทำให้การไหลของข้อมูลง่ายขึ้น
การเข้าถึงที่ดียิ่งขึ้น (Enhanced Accessibility): Portals สามารถเป็นเครื่องมือสำคัญในการสร้าง UI ที่เข้าถึงได้ง่าย ตัวอย่างเช่น โมดอลสามารถเรนเดอร์โดยตรงไปยัง document.body ทำให้ง่ายต่อการจัดการ focus trapping และทำให้แน่ใจว่าโปรแกรมอ่านหน้าจอ (screen readers) ตีความเนื้อหาว่าเป็น dialog ระดับบนสุดได้อย่างถูกต้อง
ความสอดคล้องในระดับโลก (Global Consistency): สำหรับแอปพลิเคชันที่ให้บริการผู้ใช้ทั่วโลก พฤติกรรมของ UI ที่สอดคล้องกันเป็นสิ่งสำคัญ Portals ช่วยให้นักพัฒนาสามารถนำรูปแบบ UI มาตรฐานมาใช้ (เช่น พฤติกรรมของโมดอลที่สอดคล้องกัน) ในส่วนต่างๆ ของแอปพลิเคชันโดยไม่ต้องต่อสู้กับปัญหา CSS ที่ซ้อนกันหรือความขัดแย้งของลำดับชั้น DOM

การตั้งค่าโดยทั่วไปเกี่ยวข้องกับการสร้าง DOM node เฉพาะในไฟล์ index.html ของคุณ (เช่น <div id="modal-root"></div>) แล้วใช้ `ReactDOM.createPortal` เพื่อเรนเดอร์เนื้อหาเข้าไปในนั้น ตัวอย่างเช่น:


// public/index.html
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

// MyModal.js
import React from 'react';
import ReactDOM from 'react-dom';

const portalRoot = document.getElementById('portal-root');

const MyModal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    portalRoot
  );
};

export default MyModal;

ปริศนาการจัดการ Event: เมื่อ DOM และ React Trees แตกต่างกัน

ระบบ Synthetic Event ของ React เป็นสิ่งมหัศจรรย์ของการสร้าง abstraction มันทำให้ browser events เป็นมาตรฐาน ทำให้การจัดการ Event มีความสอดคล้องกันในสภาพแวดล้อมที่แตกต่างกัน และจัดการ event listeners อย่างมีประสิทธิภาพผ่านการ delegation ที่ระดับ `document` เมื่อคุณแนบ `onClick` handler กับ React element, React ไม่ได้เพิ่ม event listener โดยตรงไปยัง DOM node นั้นๆ แต่จะแนบ listener เพียงตัวเดียวสำหรับ event type นั้น (เช่น `click`) ไปยัง `document` หรือ root ของแอปพลิเคชัน React ของคุณ

เมื่อ browser event จริงเกิดขึ้น (เช่น การคลิก) มันจะลอยขึ้น (bubble up) ตาม DOM tree ดั้งเดิมไปยัง `document` React จะดักจับ Event นี้ ห่อหุ้มมันใน synthetic event object ของมัน แล้วส่งต่อไปยังคอมโพเนนต์ React ที่เหมาะสม โดยจำลองการ bubbling ผ่าน React component tree ระบบนี้ทำงานได้ดีอย่างเหลือเชื่อสำหรับคอมโพเนนต์ที่เรนเดอร์ภายในลำดับชั้น DOM มาตรฐาน

ความแปลกประหลาดของ Portal: ทางเบี่ยงใน DOM

นี่คือความท้าทายของ Portals: ในขณะที่องค์ประกอบที่เรนเดอร์ผ่าน Portal นั้น ตามตรรกะแล้วเป็น child ของ React parent ของมัน แต่ตำแหน่งทางกายภาพใน DOM tree อาจแตกต่างกันโดยสิ้นเชิง หากแอปพลิเคชันหลักของคุณถูก mount ที่ <div id="root"></div> และเนื้อหา Portal ของคุณเรนเดอร์ใน <div id="portal-root"></div> (ซึ่งเป็นพี่น้องกับ `root`), click event ที่เกิดขึ้นภายใน Portal จะลอยขึ้นตามเส้นทาง DOM ดั้งเดิมของ *มันเอง* จนไปถึง `document.body` แล้วไปที่ `document` มันจะ *ไม่* ลอยขึ้นผ่าน `div#root` ไปยัง event listeners ที่แนบอยู่กับบรรพบุรุษของ parent *เชิงตรรกะ* ของ Portal ภายใน `div#root`

ความแตกต่างนี้หมายความว่ารูปแบบการจัดการ Event แบบดั้งเดิม ที่คุณอาจวาง click handler บน element แม่โดยคาดหวังว่าจะจับ Event จาก children ทั้งหมดของมัน อาจล้มเหลวหรือทำงานผิดปกติเมื่อ children เหล่านั้นถูกเรนเดอร์ใน Portal ตัวอย่างเช่น หากคุณมี `div` ในคอมโพเนนต์ `App` หลักของคุณพร้อมกับ `onClick` listener และคุณเรนเดอร์ปุ่มภายใน Portal ซึ่งตามตรรกะแล้วเป็น child ของ `div` นั้น การคลิกปุ่มจะ *ไม่* ทริกเกอร์ `onClick` handler ของ `div` ผ่านการ bubbling ของ DOM ดั้งเดิม

อย่างไรก็ตาม และนี่คือความแตกต่างที่สำคัญมาก: ระบบ Synthetic Event ของ React สามารถเชื่อมช่องว่างนี้ได้ เมื่อ native event เกิดขึ้นจาก Portal กลไกภายในของ React จะทำให้แน่ใจว่า synthetic event ยังคงลอยขึ้นผ่าน React component tree ไปยัง parent เชิงตรรกะ ซึ่งหมายความว่าหากคุณมี `onClick` handler บนคอมโพเนนต์ React ที่มี Portal อยู่ภายในตามตรรกะ การคลิกภายใน Portal *จะ* ทริกเกอร์ handler นั้น นี่คือลักษณะพื้นฐานของระบบ Event ของ React ที่ทำให้ Event Delegation กับ Portals ไม่เพียงแต่เป็นไปได้ แต่ยังเป็นแนวทางที่แนะนำอีกด้วย

ทางออก: Event Delegation โดยละเอียด

Event delegation คือรูปแบบการออกแบบสำหรับการจัดการ Event โดยที่คุณแนบ event listener เพียงตัวเดียวกับองค์ประกอบบรรพบุรุษร่วม (common ancestor element) แทนที่จะแนบ listener แต่ละตัวกับองค์ประกอบลูกหลานหลายๆ ตัว เมื่อ Event (เช่น การคลิก) เกิดขึ้นบนองค์ประกอบลูกหลาน มันจะลอยขึ้นตาม DOM tree จนกระทั่งไปถึงบรรพบุรุษที่มี listener ที่ถูก delegate ไว้ จากนั้น listener จะใช้คุณสมบัติ `event.target` เพื่อระบุองค์ประกอบเฉพาะที่ Event เกิดขึ้นและตอบสนองตามนั้น

ข้อดีที่สำคัญของ Event Delegation

การเพิ่มประสิทธิภาพ (Performance Optimization): แทนที่จะมี event listeners จำนวนมาก คุณมีเพียงตัวเดียว ซึ่งช่วยลดการใช้หน่วยความจำและเวลาในการตั้งค่า โดยเฉพาะอย่างยิ่งสำหรับ UI ที่ซับซ้อนซึ่งมีองค์ประกอบแบบโต้ตอบจำนวนมาก หรือสำหรับแอปพลิเคชันที่ปรับใช้ทั่วโลกซึ่งประสิทธิภาพของทรัพยากรเป็นสิ่งสำคัญยิ่ง
การจัดการเนื้อหาแบบไดนามิก (Dynamic Content Handling): องค์ประกอบที่เพิ่มเข้ามาใน DOM หลังจากการเรนเดอร์ครั้งแรก (เช่น ผ่าน AJAX requests หรือการโต้ตอบของผู้ใช้) จะได้รับประโยชน์จาก delegated listeners โดยอัตโนมัติโดยไม่จำเป็นต้องแนบ listeners ใหม่ ซึ่งเหมาะอย่างยิ่งสำหรับเนื้อหา Portal ที่เรนเดอร์แบบไดนามิก
โค้ดที่สะอาดขึ้น (Cleaner Code): การรวมศูนย์ตรรกะของ Event ทำให้ codebase ของคุณมีระเบียบและบำรุงรักษาง่ายขึ้น
ความทนทานข้ามโครงสร้าง DOM (Robustness Across DOM Structures): ดังที่เราได้กล่าวไปแล้ว ระบบ Synthetic Event ของ React ทำให้แน่ใจว่า Event ที่มาจากเนื้อหาของ Portal *ยังคง* ลอยขึ้นผ่าน React component tree ไปยังบรรพบุรุษเชิงตรรกะของมัน นี่คือรากฐานที่ทำให้ Event Delegation เป็นกลยุทธ์ที่มีประสิทธิภาพสำหรับ Portals แม้ว่าตำแหน่งทางกายภาพใน DOM จะแตกต่างกันก็ตาม

คำอธิบาย Event Bubbling และ Capture

เพื่อให้เข้าใจ Event Delegation อย่างถ่องแท้ สิ่งสำคัญคือต้องเข้าใจสองช่วงของการแพร่กระจายของ Event ใน DOM:

ช่วง Capturing (Trickle Down): Event เริ่มต้นที่ root ของ `document` และเดินทางลงมาตาม DOM tree ผ่านองค์ประกอบบรรพบุรุษแต่ละตัวจนกระทั่งถึงองค์ประกอบเป้าหมาย Listeners ที่ลงทะเบียนด้วย `useCapture = true` (หรือใน React โดยการเพิ่มส่วนต่อท้าย `Capture` เช่น `onClickCapture`) จะทำงานในช่วงนี้
ช่วง Bubbling (Bubble Up): หลังจากถึงองค์ประกอบเป้าหมาย Event จะเดินทางกลับขึ้นไปตาม DOM tree จากองค์ประกอบเป้าหมายไปยัง root ของ `document` ผ่านองค์ประกอบบรรพบุรุษแต่ละตัว Event listeners ส่วนใหญ่ รวมถึง `onClick`, `onChange` มาตรฐานทั้งหมดของ React จะทำงานในช่วงนี้

ระบบ Synthetic Event ของ React อาศัยช่วง bubbling เป็นหลัก เมื่อเกิด Event บนองค์ประกอบภายใน Portal, native browser event จะลอยขึ้นตามเส้นทาง DOM ทางกายภาพของมัน Root listener ของ React (โดยปกติจะอยู่ที่ `document`) จะจับ native event นี้ ที่สำคัญคือ React จะสร้าง Event ขึ้นมาใหม่และส่ง *synthetic* counterpart ของมัน ซึ่งจะ *จำลองการลอยขึ้นตาม React component tree* จากคอมโพเนนต์ภายใน Portal ไปยังคอมโพเนนต์แม่เชิงตรรกะของมัน Abstraction ที่ชาญฉลาดนี้ทำให้มั่นใจได้ว่า Event Delegation ทำงานได้อย่างราบรื่นกับ Portals แม้ว่าจะมีการปรากฏตัวทางกายภาพใน DOM ที่แยกจากกันก็ตาม

การนำ Event Delegation มาใช้กับ React Portals

เรามาดูสถานการณ์ทั่วไปกัน: กล่องโต้ตอบโมดอลที่ปิดเมื่อผู้ใช้คลิกนอกพื้นที่เนื้อหา (บน backdrop) หรือกดปุ่ม `Escape` นี่เป็นกรณีการใช้งานคลาสสิกสำหรับ Portals และเป็นตัวอย่างที่ยอดเยี่ยมของ Event Delegation

สถานการณ์: โมดอลที่ปิดเมื่อคลิกด้านนอก

เราต้องการสร้างคอมโพเนนต์โมดอลโดยใช้ React Portal โมดอลควรปรากฏขึ้นเมื่อมีการคลิกปุ่ม และควรปิดเมื่อ:

ผู้ใช้คลิกบน overlay กึ่งโปร่งใส (backdrop) ที่อยู่รอบๆ เนื้อหาโมดอล
ผู้ใช้กดปุ่ม `Escape`
ผู้ใช้คลิกปุ่ม "Close" ที่ชัดเจนภายในโมดอล

การ υλοποίηση ทีละขั้นตอน

ขั้นตอนที่ 1: เตรียม HTML และคอมโพเนนต์ Portal

ตรวจสอบให้แน่ใจว่า `index.html` ของคุณมี root เฉพาะสำหรับ portals สำหรับตัวอย่างนี้ เราจะใช้ `id="portal-root"`


// public/index.html (snippet)
<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- เป้าหมายของ portal ของเรา -->
</body>

ถัดไป สร้างคอมโพเนนต์ `Portal` ง่ายๆ เพื่อห่อหุ้มตรรกะของ `ReactDOM.createPortal` ซึ่งจะทำให้คอมโพเนนต์โมดอลของเราสะอาดขึ้น


// components/Portal.js
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface PortalProps {
  children: React.ReactNode;
  wrapperId?: string;
}

// เราจะสร้าง div สำหรับ portal หากยังไม่มีสำหรับ wrapperId ที่กำหนด
function createWrapperAndAppendToBody(wrapperId: string) {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
}

function Portal({ children, wrapperId = 'portal-wrapper' }: PortalProps) {
  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId) as HTMLElement;
    let created = false;

    if (!element) {
      created = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // ล้างองค์ประกอบออกหากเราเป็นคนสร้างขึ้น
      if (created && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  // wrapperElement จะเป็น null ในการเรนเดอร์ครั้งแรก ซึ่งไม่เป็นไรเพราะเราจะไม่เรนเดอร์อะไรเลย
  if (!wrapperElement) return null;

  return createPortal(children, wrapperElement);
}

export default Portal;

หมายเหตุ: เพื่อความเรียบง่าย `portal-root` ถูก hardcode ไว้ใน `index.html` ในตัวอย่างก่อนหน้านี้ คอมโพเนนต์ `Portal.js` นี้นำเสนอแนวทางที่ไดนามิกกว่า โดยสร้าง wrapper div หากยังไม่มีอยู่ เลือกวิธีที่เหมาะสมกับความต้องการของโปรเจกต์ของคุณที่สุด เราจะดำเนินการต่อโดยใช้ `portal-root` ที่ระบุใน `index.html` สำหรับคอมโพเนนต์ `Modal` เพื่อความตรงไปตรงมา แต่ `Portal.js` ข้างต้นเป็นทางเลือกที่แข็งแกร่ง

ขั้นตอนที่ 2: สร้างคอมโพเนนต์ Modal

คอมโพเนนต์ `Modal` ของเราจะรับเนื้อหาเป็น `children` และ callback `onClose`


// components/Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const modalRoot = document.getElementById('portal-root') as HTMLElement;

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);

  if (!isOpen) return null;

  // จัดการการกดปุ่ม Escape
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [onClose]);

  // กุญแจสำคัญของ event delegation: click handler ตัวเดียวบน backdrop
  // นอกจากนี้ยัง delegate ไปยังปุ่มปิดภายในโมดอลโดยปริยายด้วย
  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
    // ตรวจสอบว่าเป้าหมายการคลิกคือ backdrop เอง ไม่ใช่เนื้อหาภายในโมดอล
    // การใช้ `modalContentRef.current.contains(event.target)` เป็นสิ่งสำคัญที่นี่
    // event.target คือองค์ประกอบที่เกิดการคลิกขึ้น
    // event.currentTarget คือองค์ประกอบที่ event listener ถูกแนบอยู่ (modal-overlay)
    if (modalContentRef.current && !modalContentRef.current.contains(event.target as Node)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        {children}
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

ขั้นตอนที่ 3: รวมเข้ากับคอมโพเนนต์แอปพลิเคชันหลัก

คอมโพเนนต์ `App` หลักของเราจะจัดการสถานะเปิด/ปิดของโมดอลและเรนเดอร์ `Modal`


// App.js
import React, { useState } from 'react';
import Modal from './components/Modal';
import './App.css'; // สำหรับสไตล์พื้นฐาน

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div className="App">
      <h1>React Portal Event Delegation Example</h1>
      <p>Demonstrating event handling across different DOM trees.</p>

      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Welcome to the Modal!</h2>
        <p>This content is rendered in a React Portal, outside the main application's DOM hierarchy.</p>
        <button onClick={closeModal}>Close from inside</button>
      </Modal>

      <p>Some other content behind the modal.</p>
      <p>Another paragraph to show the background.</p>
    </div>
  );
}

export default App;

ขั้นตอนที่ 4: สไตล์พื้นฐาน (App.css)

เพื่อให้เห็นภาพของโมดอลและ backdrop ของมัน


/* App.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 80%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative; /* จำเป็นสำหรับการจัดตำแหน่งปุ่มภายในหากมี */
}

.modal-content button {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content > button:last-child { /* สไตล์สำหรับปุ่มปิด 'X' */
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    border: none;
}

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

.App button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.App button:hover {
  background-color: #218838;
}

คำอธิบายตรรกะของ Delegation

ในคอมโพเนนต์ `Modal` ของเรา `onClick={handleBackdropClick}` ถูกแนบกับ div `.modal-overlay` ซึ่งทำหน้าที่เป็น delegated listener ของเรา เมื่อมีการคลิกใดๆ เกิดขึ้นภายใน overlay นี้ (ซึ่งรวมถึง `modal-content` และปุ่มปิด `X` ภายในนั้น รวมถึงปุ่ม 'Close from inside') ฟังก์ชัน `handleBackdropClick` จะถูกเรียกใช้งาน

ภายใน `handleBackdropClick`:

`event.target` หมายถึงองค์ประกอบ DOM เฉพาะที่ถูก *คลิกจริงๆ* (เช่น `<h2>`, `<p>` หรือ `<button>` ภายใน `modal-content` หรือ `modal-overlay` เอง)
`event.currentTarget` หมายถึงองค์ประกอบที่ event listener ถูกแนบไว้ ซึ่งในกรณีนี้คือ div `.modal-overlay`
เงื่อนไข `!modalContentRef.current.contains(event.target as Node)` คือหัวใจของการ delegation ของเรา มันตรวจสอบว่าองค์ประกอบที่ถูกคลิก (`event.target`) *ไม่ได้* เป็นลูกหลานของ div `modal-content` หรือไม่ หาก `event.target` คือ `.modal-overlay` เอง หรือองค์ประกอบอื่นใดที่เป็น child โดยตรงของ overlay แต่ไม่ใช่ส่วนหนึ่งของ `modal-content` แล้ว `contains` จะคืนค่า `false` และโมดอลจะปิด
ที่สำคัญ ระบบ Synthetic Event ของ React ทำให้แน่ใจว่าแม้ `event.target` จะเป็นองค์ประกอบที่เรนเดอร์ทางกายภาพใน `portal-root`, `onClick` handler บน parent เชิงตรรกะ (`.modal-overlay` ในคอมโพเนนต์ Modal) จะยังคงถูกทริกเกอร์ และ `event.target` จะระบุองค์ประกอบที่ซ้อนลึกได้อย่างถูกต้อง

สำหรับปุ่มปิดภายใน การเรียก `onClose()` โดยตรงบน `onClick` handlers ของพวกมันทำงานได้เพราะ handlers เหล่านี้จะทำงาน *ก่อน* ที่ Event จะลอยขึ้นไปยัง delegated listener ของ `modal-overlay` หรือถูกจัดการอย่างชัดเจน แม้ว่ามันจะลอยขึ้นไป การตรวจสอบ `contains()` ของเราก็จะป้องกันไม่ให้โมดอลปิดหากการคลิกมาจากภายในเนื้อหา

`useEffect` สำหรับ listener ปุ่ม `Escape` ถูกแนบโดยตรงกับ `document` ซึ่งเป็นรูปแบบที่พบบ่อยและมีประสิทธิภาพสำหรับคีย์ลัดแป้นพิมพ์ทั่วโลก เนื่องจากทำให้แน่ใจว่า listener ทำงานอยู่โดยไม่คำนึงถึงโฟกัสของคอมโพเนนต์ และจะจับ Event จากทุกที่ใน DOM รวมถึง Event ที่มาจากภายใน Portals

การจัดการสถานการณ์ Event Delegation ทั่วไป

การป้องกันการแพร่กระจายของ Event ที่ไม่ต้องการ: `event.stopPropagation()`

บางครั้ง แม้จะมีการ delegation คุณอาจมีองค์ประกอบเฉพาะภายในพื้นที่ที่คุณ delegate ซึ่งคุณต้องการหยุด Event ไม่ให้ลอยขึ้นไปอีกอย่างชัดเจน ตัวอย่างเช่น หากคุณมีองค์ประกอบแบบโต้ตอบที่ซ้อนกันภายในเนื้อหาโมดอลของคุณ ซึ่งเมื่อคลิกแล้ว *ไม่ควร* ทริกเกอร์ลอจิก `onClose` (แม้ว่าการตรวจสอบ `contains` จะจัดการให้แล้วก็ตาม) คุณสามารถใช้ `event.stopPropagation()` ได้


<div className="modal-content" ref={modalContentRef}>
  <h2>Modal Content</h2>
  <p>Clicking this area will not close the modal.</p>
  <button onClick={(e) => {
    e.stopPropagation(); // ป้องกันไม่ให้การคลิกนี้ลอยขึ้นไปที่ backdrop
    console.log('Inner button clicked!');
  }}>Inner Action Button</button>
  <button onClick={onClose}>Close</button>
</div>

แม้ว่า `event.stopPropagation()` จะมีประโยชน์ แต่ควรใช้อย่างรอบคอบ การใช้มากเกินไปอาจทำให้การไหลของ Event คาดเดาไม่ได้และทำให้การดีบักยากขึ้น โดยเฉพาะในแอปพลิเคชันขนาดใหญ่ที่เผยแพร่ทั่วโลกซึ่งทีมต่างๆ อาจมีส่วนร่วมใน UI

การจัดการองค์ประกอบลูกเฉพาะด้วย Delegation

นอกเหนือจากการตรวจสอบว่าการคลิกอยู่ภายในหรือภายนอกแล้ว Event Delegation ยังช่วยให้คุณสามารถแยกแยะระหว่างการคลิกประเภทต่างๆ ภายในพื้นที่ที่ delegate ได้ คุณสามารถใช้คุณสมบัติต่างๆ เช่น `event.target.tagName`, `event.target.id`, `event.target.className` หรือ `event.target.dataset` attributes เพื่อดำเนินการต่างๆ ได้


const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
  if (modalContentRef.current && modalContentRef.current.contains(event.target as Node)) {
    // การคลิกอยู่ภายในเนื้อหาโมดอล
    const clickedElement = event.target as HTMLElement;

    if (clickedElement.tagName === 'BUTTON' && clickedElement.dataset.action === 'confirm') {
      console.log('Confirm action triggered!');
      onClose();
    } else if (clickedElement.tagName === 'A') {
      console.log('Link inside modal clicked:', clickedElement.href);
      // อาจจะป้องกันพฤติกรรมเริ่มต้นหรือนำทางด้วยโปรแกรม
    }
    // handlers เฉพาะอื่นๆ สำหรับองค์ประกอบภายในโมดอล
  } else {
    // การคลิกอยู่นอกเนื้อหาโมดอล (บน backdrop)
    onClose();
  }
};

รูปแบบนี้เป็นวิธีที่มีประสิทธิภาพในการจัดการองค์ประกอบแบบโต้ตอบหลายรายการภายในเนื้อหา Portal ของคุณโดยใช้ event listener เพียงตัวเดียวที่มีประสิทธิภาพ

เมื่อไม่ควรใช้ Delegate

แม้ว่า Event Delegation จะเป็นที่แนะนำอย่างยิ่งสำหรับ Portals แต่ก็มีบางสถานการณ์ที่การใช้ event listeners โดยตรงบนองค์ประกอบอาจเหมาะสมกว่า:

พฤติกรรมของคอมโพเนนต์ที่เฉพาะเจาะจงมาก: หากคอมโพเนนต์มีตรรกะของ Event ที่เฉพาะทางและครบถ้วนในตัวเองซึ่งไม่จำเป็นต้องโต้ตอบกับ delegated handlers ของบรรพบุรุษ
องค์ประกอบ Input ที่มี `onChange`: สำหรับ controlled components เช่น text inputs, `onChange` listeners มักจะถูกวางโดยตรงบนองค์ประกอบ input เพื่อการอัปเดต state ทันที แม้ว่า Event เหล่านี้จะลอยขึ้นเช่นกัน แต่การจัดการโดยตรงเป็นแนวปฏิบัติมาตรฐาน
Event ที่มีความถี่สูงและสำคัญต่อประสิทธิภาพ: สำหรับ Event เช่น `mousemove` หรือ `scroll` ที่ทำงานบ่อยมาก การ delegate ไปยังบรรพบุรุษที่อยู่ห่างไกลอาจเพิ่ม overhead เล็กน้อยในการตรวจสอบ `event.target` ซ้ำๆ อย่างไรก็ตาม สำหรับการโต้ตอบ UI ส่วนใหญ่ (clicks, keydowns) ประโยชน์ของ delegation มีมากกว่าค่าใช้จ่ายเพียงเล็กน้อยนี้

รูปแบบขั้นสูงและข้อควรพิจารณา

สำหรับแอปพลิเคชันที่ซับซ้อนมากขึ้น โดยเฉพาะอย่างยิ่งแอปพลิเคชันที่รองรับฐานผู้ใช้ทั่วโลกที่หลากหลาย คุณอาจพิจารณารูปแบบขั้นสูงเพื่อจัดการการจัดการ Event ภายใน Portals

การส่ง Custom Event

ในกรณีพิเศษที่ระบบ Synthetic Event ของ React ไม่สอดคล้องกับความต้องการของคุณอย่างสมบูรณ์ (ซึ่งเกิดขึ้นได้ยาก) คุณสามารถส่ง custom events ด้วยตนเองได้ ซึ่งเกี่ยวข้องกับการสร้างอ็อบเจกต์ `CustomEvent` และส่งจากองค์ประกอบเป้าหมาย อย่างไรก็ตาม วิธีนี้มักจะข้ามระบบ Event ที่ปรับให้เหมาะสมของ React และควรใช้ด้วยความระมัดระวังและเฉพาะเมื่อจำเป็นจริงๆ เท่านั้น เนื่องจากอาจเพิ่มความซับซ้อนในการบำรุงรักษา


// ภายในคอมโพเนนต์ Portal
const handleCustomAction = () => {
  const event = new CustomEvent('my-custom-portal-event', { detail: { data: 'some info' }, bubbles: true });
  document.dispatchEvent(event);
};

// ที่ไหนสักแห่งในแอปหลักของคุณ เช่น ใน effect hook
useEffect(() => {
  const handler = (event: Event) => {
    if (event instanceof CustomEvent) {
      console.log('Custom event received:', event.detail);
    }
  };
  document.addEventListener('my-custom-portal-event', handler);
  return () => document.removeEventListener('my-custom-portal-event', handler);
}, []);

แนวทางนี้ให้การควบคุมที่ละเอียด แต่ต้องมีการจัดการประเภทและ payloads ของ Event อย่างระมัดระวัง

Context API สำหรับ Event Handlers

สำหรับแอปพลิเคชันขนาดใหญ่ที่มีเนื้อหา Portal ซ้อนกันลึก การส่ง `onClose` หรือ handlers อื่นๆ ผ่าน props อาจนำไปสู่ prop drilling ได้ React's Context API มอบทางออกที่สวยงาม:


// context/ModalContext.js
import React, { createContext, useContext } from 'react';

interface ModalContextType {
  onClose?: () => void;
  // เพิ่ม handlers อื่นๆ ที่เกี่ยวข้องกับโมดอลตามต้องการ
}

const ModalContext = createContext<ModalContextType>({});

export const useModal = () => useContext(ModalContext);

export const ModalProvider = ({ children, onClose }: ModalContextType & React.PropsWithChildren) => (
  <ModalContext.Provider value={{ onClose }}>
    {children}
  </ModalContext.Provider>
);

// components/Modal.js (อัปเดตเพื่อใช้ Context)
// ... (imports และ modalRoot ถูกกำหนดไว้)

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);
  // ... (useEffect สำหรับปุ่ม Escape, handleBackdropClick ยังคงเหมือนเดิมเป็นส่วนใหญ่)

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        <ModalProvider onClose={onClose}>{children}</ModalProvider> <!-- ให้ context -->
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

// components/DeeplyNestedComponent.js (ที่ไหนสักแห่งภายใน modal children)
import React from 'react';
import { useModal } from '../context/ModalContext';

const DeeplyNestedComponent = () => {
  const { onClose } = useModal();

  return (
    <div>
      <p>This component is deep inside the modal.</p>
      {onClose && <button onClick={onClose}>Close from Deep Nest</button>}
    </div>
  );
};

การใช้ Context API เป็นวิธีที่สะอาดในการส่ง handlers (หรือข้อมูลอื่นๆ ที่เกี่ยวข้อง) ลงไปใน component tree ไปยังเนื้อหา Portal ทำให้ interface ของคอมโพเนนต์ง่ายขึ้นและปรับปรุงความสามารถในการบำรุงรักษา โดยเฉพาะอย่างยิ่งสำหรับทีมงานระดับนานาชาติที่ทำงานร่วมกันในระบบ UI ที่ซับซ้อน

ผลกระทบด้านประสิทธิภาพ

ในขณะที่ Event Delegation เองเป็นตัวช่วยเพิ่มประสิทธิภาพ แต่ต้องระวังความซับซ้อนของ `handleBackdropClick` หรือตรรกะที่ delegate ของคุณ หากคุณกำลังทำการ traversing DOM หรือคำนวณที่สิ้นเปลืองทรัพยากรทุกครั้งที่คลิก อาจส่งผลกระทบต่อประสิทธิภาพได้ ควรปรับปรุงการตรวจสอบของคุณ (เช่น `event.target.closest()`, `element.contains()`) ให้มีประสิทธิภาพมากที่สุด สำหรับ Event ที่มีความถี่สูงมาก ให้พิจารณาใช้ debouncing หรือ throttling หากจำเป็น แม้ว่าจะไม่ค่อยพบบ่อยสำหรับ Event click/keydown ง่ายๆ ในโมดอลก็ตาม

ข้อควรพิจารณาด้านการเข้าถึง (A11y) สำหรับผู้ใช้ทั่วโลก

การเข้าถึงไม่ใช่สิ่งที่ทำทีหลัง แต่เป็นข้อกำหนดพื้นฐาน โดยเฉพาะอย่างยิ่งเมื่อสร้างสำหรับผู้ใช้ทั่วโลกที่มีความต้องการและเทคโนโลยีช่วยเหลือที่หลากหลาย เมื่อใช้ Portals สำหรับโมดอลหรือ overlays ที่คล้ายกัน การจัดการ Event มีบทบาทสำคัญในการเข้าถึง:

การจัดการโฟกัส (Focus Management): เมื่อโมดอลเปิดขึ้น โฟกัสควรถูกย้ายไปยังองค์ประกอบแบบโต้ตอบแรกภายในโมดอลโดยใช้โปรแกรม เมื่อโมดอลปิด โฟกัสควรกลับไปยังองค์ประกอบที่ทริกเกอร์การเปิด ซึ่งมักจะจัดการด้วย `useEffect` และ `useRef`
การโต้ตอบด้วยคีย์บอร์ด (Keyboard Interaction): ฟังก์ชันการปิดด้วยปุ่ม `Escape` (ดังที่สาธิต) เป็นรูปแบบการเข้าถึงที่สำคัญ ตรวจสอบให้แน่ใจว่าองค์ประกอบแบบโต้ตอบทั้งหมดภายในโมดอลสามารถนำทางด้วยคีย์บอร์ดได้ (ปุ่ม `Tab`)
ARIA Attributes: ใช้ ARIA roles และ attributes ที่เหมาะสม สำหรับโมดอล `role="dialog"` หรือ `role="alertdialog"`, `aria-modal="true"` และ `aria-labelledby` หรือ `aria-describedby` เป็นสิ่งจำเป็น คุณสมบัติเหล่านี้ช่วยให้โปรแกรมอ่านหน้าจอประกาศการมีอยู่ของโมดอลและอธิบายวัตถุประสงค์ของมัน
การดักจับโฟกัส (Focus Trapping): ใช้การดักจับโฟกัสภายในโมดอล เพื่อให้แน่ใจว่าเมื่อผู้ใช้กด `Tab` โฟกัสจะวนอยู่เฉพาะองค์ประกอบ *ภายใน* โมดอลเท่านั้น ไม่ใช่องค์ประกอบในแอปพลิเคชันพื้นหลัง ซึ่งโดยทั่วไปจะทำได้ด้วย `keydown` handlers เพิ่มเติมบนโมดอลเอง

การเข้าถึงที่แข็งแกร่งไม่ได้เป็นเพียงเรื่องของการปฏิบัติตามข้อกำหนดเท่านั้น แต่ยังขยายการเข้าถึงของแอปพลิเคชันของคุณไปยังฐานผู้ใช้ทั่วโลกที่กว้างขึ้น รวมถึงบุคคลที่มีความพิการ เพื่อให้แน่ใจว่าทุกคนสามารถโต้ตอบกับ UI ของคุณได้อย่างมีประสิทธิภาพ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดการ Event ใน React Portal

โดยสรุป นี่คือแนวทางปฏิบัติที่ดีที่สุดที่สำคัญสำหรับการจัดการ Event กับ React Portals อย่างมีประสิทธิภาพ:

ยอมรับ Event Delegation: ควรเลือกแนบ event listener เพียงตัวเดียวกับบรรพบุรุษร่วม (เช่น backdrop ของโมดอล) และใช้ `event.target` กับ `element.contains()` หรือ `event.target.closest()` เพื่อระบุองค์ประกอบที่ถูกคลิก
ทำความเข้าใจ Synthetic Events ของ React: จำไว้ว่าระบบ Synthetic Event ของ React จะกำหนดเป้าหมายของ Event จาก Portals ใหม่ได้อย่างมีประสิทธิภาพเพื่อให้ลอยขึ้นตาม React component tree เชิงตรรกะของมัน ทำให้ delegation มีความน่าเชื่อถือ
จัดการ Global Listeners อย่างรอบคอบ: สำหรับ Event ทั่วโลกเช่นการกดปุ่ม `Escape` ให้แนบ listeners โดยตรงกับ `document` ภายใน `useEffect` hook และตรวจสอบให้แน่ใจว่ามีการ cleanup อย่างเหมาะสม
ลดการใช้ `stopPropagation()`: ใช้ `event.stopPropagation()` อย่างประหยัด เพราะอาจสร้างการไหลของ Event ที่ซับซ้อนได้ ออกแบบตรรกะ delegation ของคุณเพื่อจัดการเป้าหมายการคลิกต่างๆ อย่างเป็นธรรมชาติ
ให้ความสำคัญกับการเข้าถึง (Accessibility): นำคุณสมบัติด้านการเข้าถึงที่ครอบคลุมมาใช้ตั้งแต่ต้น รวมถึงการจัดการโฟกัส การนำทางด้วยคีย์บอร์ด และ ARIA attributes ที่เหมาะสม
ใช้ `useRef` สำหรับการอ้างอิง DOM: ใช้ `useRef` เพื่อรับการอ้างอิงโดยตรงไปยังองค์ประกอบ DOM ภายใน portal ของคุณ ซึ่งมีความสำคัญอย่างยิ่งสำหรับการตรวจสอบ `element.contains()`
พิจารณา Context API สำหรับ Props ที่ซับซ้อน: สำหรับ component trees ที่ลึกภายใน Portals ให้ใช้ Context API เพื่อส่ง event handlers หรือ state ที่ใช้ร่วมกันอื่นๆ เพื่อลด prop drilling
ทดสอบอย่างละเอียด: เนื่องจากลักษณะข้าม DOM ของ Portals ให้ทดสอบการจัดการ Event อย่างเข้มงวดในการโต้ตอบของผู้ใช้ต่างๆ สภาพแวดล้อมของเบราว์เซอร์ และเทคโนโลยีช่วยเหลือต่างๆ

บทสรุป

React Portals เป็นเครื่องมือที่ขาดไม่ได้สำหรับการสร้างส่วนติดต่อผู้ใช้ขั้นสูงที่น่าดึงดูดสายตา อย่างไรก็ตาม ความสามารถในการเรนเดอร์เนื้อหานอกลำดับชั้น DOM ของคอมโพเนนต์แม่ทำให้เกิดข้อควรพิจารณาที่ไม่เหมือนใครสำหรับการจัดการ Event โดยการทำความเข้าใจระบบ Synthetic Event ของ React และการเชี่ยวชาญศิลปะของ Event Delegation นักพัฒนาสามารถเอาชนะความท้าทายเหล่านี้และสร้างแอปพลิเคชันที่มีการโต้ตอบสูง มีประสิทธิภาพ และเข้าถึงได้ง่าย

การนำ Event Delegation มาใช้ทำให้แน่ใจได้ว่าแอปพลิเคชันระดับโลกของคุณจะมอบประสบการณ์ผู้ใช้ที่สอดคล้องและแข็งแกร่ง โดยไม่คำนึงถึงโครงสร้าง DOM พื้นฐาน ซึ่งนำไปสู่โค้ดที่สะอาดขึ้น บำรุงรักษาง่ายขึ้น และปูทางไปสู่การพัฒนา UI ที่ปรับขนาดได้ ยอมรับรูปแบบเหล่านี้ แล้วคุณจะพร้อมที่จะใช้ประโยชน์จากพลังทั้งหมดของ React Portals ในโปรเจกต์ต่อไปของคุณ เพื่อมอบประสบการณ์ดิจิทัลที่ยอดเยี่ยมให้กับผู้ใช้ทั่วโลก